import React from 'react'
import { Menu } from 'antd';
import Menus from './MenuList' //导航数据
import { Link } from 'react-router-dom'
import './index.less'
//其实利用循环与递归 形成前端菜单
//SubMenu :antd里的导航模板标签、二级标签  Menu.Item  ：一级标签
const SubMenu = Menu.SubMenu;

class NavList extends React.Component{

    //递归调用，多级导航
    renderNav(){
        return this.renderMenuItem(Menus)
    }
    //根据导航数据，递归遍历生成多级导航
    renderMenuItem(arr){
        return arr.map((item)=>{
            if(item.children){
                return (
                    <SubMenu key={item.path} title={item.title}>
                        {this.renderMenuItem(item.children)}
                    </SubMenu>
                )
            }else{
                return  <Menu.Item key={item.path}>
                    <Link to={item.path}>{item.title}</Link>
                </Menu.Item>
            }
        })
    }

    render(){
        return(
            <div className='navleft'>
                <div className='title'>
                    <img src="/asset/logo.svg" alt=""/>
                    <h2 id='title'>mymanage</h2>
                </div>
                <Menu  theme ='dark' style={{ width: 256 }} >
                    {this.renderNav()}
                </Menu>
            </div>
        )
    }
}

export default NavList
